<template>
  <a-form
    :model="formState"
    name="normal_login"
    class="login-form"
    :label-col="{ style: { width: '100px', textAlign: 'left' } }"
  >
    <a-form-item
      label="用户名/邮箱"
      name="id"
      :rules="[{ required: true, message: '请输入您的用户名或邮箱!' }]"
    >
      <a-input v-model:value="formState.id">
        <template #prefix>
          <UserOutlined class="site-form-item-icon" />
        </template>
      </a-input>
    </a-form-item>

    <a-form-item
      label="密码"
      name="password"
      :rules="[{ required: true, message: '请输入您的密码!' }]"
    >
      <a-input-password v-model:value="formState.password">
        <template #prefix>
          <LockOutlined class="site-form-item-icon" />
        </template>
      </a-input-password>
    </a-form-item>

    <div class="login-form-wrap"></div>

    <a-form-item class="login-form-button-box">
      <a-button
        :disabled="disabled"
        type="primary"
        html-type="submit"
        class="login-form-button"
        @click="login"
      >
        登录
      </a-button>
      <br />
      <a class="login-form-forgot" href="">忘记密码?</a>
    </a-form-item>
  </a-form>
</template>

<script lang="ts">
import { defineComponent, reactive, computed, ref } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { UserModule } from '@/store/modules/user';
import { useRouter } from 'vue-router';

// import { message } from 'ant-design-vue';

interface FormState {
  id: string;
  password: string;
}
export default defineComponent({
  components: {
    UserOutlined,
    LockOutlined
  },
  setup() {
    const formState = reactive<FormState>({
      id: '',
      password: ''
    });

    const disabled = computed(() => {
      return !(formState.id && formState.password);
    });

    // 路由跳转
    const router = useRouter();
    const goTo = (path: string) => {
      router.push(path);
    };

    const login = () => {
      UserModule.Login(formState).then((res) => {
        UserModule.GetUserInfo();
        goTo('/');
      });
    };

    return {
      formState,
      disabled,
      login,
      activeKey: ref('1')
    };
  }
});
</script>
<style scoped lang="less">
.login-form {
  max-width: 450px;
  margin: 0 auto;
  padding-top: 20px;
}
.login-form-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.login-form-button-box {
  text-align: center;
  .login-form-button {
    // margin-top: 20px;
    width: 60%;
    // height: 40px;
  }
}
</style>
